<template>
  <!-- 登录页面 -->
  <div class="login_container">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm">
      <h1>叩丁狼商品管理系统</h1>
      <!-- 用户名输入框 -->
      <el-form-item prop="username">
        <el-input v-model="ruleForm.username" :prefix-icon="Avatar" type="text" autocomplete="off" placeholder="请输入用户名" @keydown.enter.native="submitForm" />
      </el-form-item>
      <!-- 密码输入框 -->
      <el-form-item prop="password">
        <el-input v-model="ruleForm.password" :prefix-icon="Lock" type="password" autocomplete="off" placeholder="请输入密码" @keydown.enter.native="submitForm" show-password />
      </el-form-item>
      <!-- 提交按钮 -->
      <el-form-item>
        <el-button class="btn" type="primary" @click="submitForm()" size="large">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { Avatar, Lock } from '@element-plus/icons-vue'
import { reactive, toRefs, ref } from 'vue'
import * as api from '@/request/api'
import { useRouter } from 'vue-router'
// 获取项目路由对象
const router = useRouter()
// 表单数据
const data = reactive({
  ruleForm: {
    username: '',
    password: '',
  },
})
const { ruleForm } = toRefs(data)
// 用户名 校验规则
const valiUsername = (rule: unknown, value: string, callback: (msg?: Error) => void) => {
  if (value == '') {
    callback(new Error('请输入用户名！！！'))
  } else {
    callback()
  }
}
// 密码 校验规则
const valiPassword = (rule: unknown, value: string, callback: (msg?: Error) => void) => {
  if (value == '') {
    callback(new Error('请输入密码！！！'))
  } else {
    callback()
  }
}
// 校验规则
const rules = reactive<FormRules>({
  username: [
    // 方式一：
    // { required: true, message: '请输入用户名！！！', trigger: 'blur' },
    // 方式二：
    { validator: valiUsername, trigger: 'blur' },
  ],
  password: [{ validator: valiPassword, trigger: 'blur' }],
})
// 表单DOM
const ruleFormRef = ref<FormInstance>()
// 提交按钮
const submitForm = () => {
  if (!ruleFormRef.value) return
  // 方式一：
  /*  ruleFormRef.value
    .validate()
    .then(() => {
      console.log('登录成功!')
    })
    .catch(() => {
      console.log('登录失败!')
    }) */
  // 方式二：
  ruleFormRef.value.validate(async (isValid: boolean) => {
    if (isValid) {
      // console.log('登录成功!')
      let res = await api.admin.APIAdminLogin({
        username: ruleForm.value.username,
        password: ruleForm.value.password,
      })
      if (res.code === 200) {
        // 登录成功 提示
        ElMessage.success('登录成功!')
        // 存储 token
        localStorage.setItem('token', res.data.tokenHead + res.data.token)
        // 跳转到首页
        router.push('/index')
        ruleFormRef.value?.resetFields()
        // 获取当前登录用户信息 (写到 前置导航守卫)
        /*  let res2 = await api.admin.APIAdminInfo()
        // console.log(res2)
        if (res2.code === 200) {
          userStore.updateMenus(res2.data.menus)
          // 跳转到首页
          router.push('/index')
        } else {
          ElMessage.error(res2.message)
        } */
      } else {
        // 登录失败 提示
        ElMessage.error(res.message)
      }
    } else {
      ElMessage.warning('校验失败!')
    }
  })
}
</script>

<style lang="less" scoped>
.login_container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #2d3a4b;
  .demo-ruleForm {
    width: 420px;
    height: 250px;
    h1 {
      padding: 10px 0;
      font-size: 24px;
      color: #fff;
      text-align: center;
    }
    .el-form-item {
      border: 1px solid hsla(0, 0%, 100%, 0.1);
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      height: 50px;
      &:last-child {
        height: 40px;
      }
      margin-bottom: 22px;
      .el-form-item__content {
        line-height: 40px;
        position: relative;
        font-size: 14px;
        .el-input {
          width: 100%;
          height: 100%;
          border: 0;
          background: transparent;
          color: #fff;
          height: 50px;
          :deep(.el-input__wrapper) {
            background-color: #283443;
            box-shadow: none;
            .el-input__prefix {
              font-size: 20px;
              color: #454545;
              vertical-align: middle;
            }
            .el-input__inner {
              color: #fff;
            }
          }
        }
        .el-button {
          width: 100%;
          height: 100%;
        }
      }
      :deep(.el-form-item__error) {
        padding-top: 4px;
      }
    }
  }
}
</style>
